.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(1.55rem, auto);
  gap: 0.75rem;
}

.toggle {
  --size: 1.7rem;

  height: var(--size) !important;
  width: var(--size);

  padding: 0;

  display: flex;
  place-items: center;

  border-radius: 50%;

  background-color: hsla(var(--bgcolor), var(--bgalpha));

  transition: box-shadow 100ms ease;

  svg {
    fill: hsla(var(--svgcolor), var(--svgalpha));
  }

  &:focus-visible {
    box-shadow: 0 0 0 0.25rem hsla(var(--bgcolor), 0.4);
  }
}

// const Label = styled.div`
//   font-size: 0.8rem;
//   font-weight: 600;

//   color: ${theme.colors.dark.main};

//   margin: 0.3rem 0;
// `;
